<template>
    <div class="info_warning" id="info_warning">
      <main class="timely_alarm">
          <header>
              <div class="title">
                  <span style="color:#2f90fa;">
                    {{today_ref}}
                    <a>{{ $t("message.time") }}</a>
                  </span>
                  <p>{{ $t("home.report_error") }}</p>
              </div>
              <div class="title" style="flex: 2;color: #f48c26;">
                  <span>
                    {{week_ref}}
                    <a>{{ $t("message.time") }}</a>
                  </span>
                  <p>{{ $t("home.week_error") }}</p></div>
              <div class="title">
                  <span style="color: #e51a2e;">{{month_ref}}
                    <a>{{ $t("message.time") }}</a>
                  </span>
                  <p>{{ $t("home.month_error") }}</p>
              </div>
          </header>
          <section>
          <div class="article_title">
              <p style="width:32%;">报警点位</p>
              <p style="width:24%;">类型</p>
              <p style="width:14%">报警数值</p>
              <p style="width:40%">报警时间</p>
            </div>
              <div class="topRec_List">
                <div class="maquee" @mouseenter="closeScroll" @mouseleave="openScroll">
                  <ul ref="ul">
                    <li v-for="i in list" :key="i.rid">
                      <div>{{$t("message.point")}}{{ i.module_id }}</div>
                      <div>{{ $t(labelList[i.type_id]) }}</div>
                      <div>{{ i.error_value }}</div>
                      <div>{{ dayjs(i.createdAt).format("YYYY-MM-DD HH:mm:ss") }}</div>
                    </li>
                  </ul>
                </div>
              </div>
          </section>
      </main>
      <div class="side_border"></div>
  </div>

  </template>
  
  <script setup lang="ts">
  import {ref,onMounted, onUnmounted} from 'vue'
  const ul = ref<HTMLDivElement | null>(null);
  const oul = () => ul.value as HTMLDivElement;
  let timer = ref<any>(null);
  // 开启滚动
  const openScroll = () => {
    timer.value = setInterval(() => {
      if (Math.ceil(oul().scrollTop + oul().clientHeight) >= oul().scrollHeight) {
        oul().scrollTop=0;
      } else {
        oul().scrollTop=oul().scrollTop + 1;
      }
    }, 30);
  };
  const labelList:string[] = ["message.uv","message.inf","message.tem","message.hum","message.pre"]
  // 关闭滚动
  const closeScroll = () => {
    clearInterval(timer.value);
    timer.value = null;
  };
  import dayjs from 'dayjs'
  import { getCurrentInstance  } from 'vue';
  let today_ref = ref(0)
  let week_ref = ref(0)
  let month_ref = ref(0)
  let { proxy } = getCurrentInstance()
  onMounted(() => {
    openScroll();
    getNumber()
    getErrorList()
  });
  

  let getNumber = async () => {
       // 获取时间日期今天、一周、一个月
    let today = dayjs().format('YYYY-M-D')
    let week = dayjs().subtract(1, 'week').format('YYYY-MM-DD')
    let month = dayjs().subtract(1, 'month').format('YYYY-MM-DD')
   let res = await proxy?.$adminHttp.get("/admin/getErrorNum",{
    params: {
       today,
       week,
       month
    }
   })
      if (res.data.code === 200) {
        today_ref.value = res.data.data[0]
        week_ref.value = res.data.data[1]
        month_ref.value = res.data.data[2]
      }
  }
  let list = ref([])
  const getErrorList = async () => {
    let {data: res} = await proxy.$adminHttp.get("/admin/getErrorList",{
      params: {
        pageSize: 30
      }
    })
    console.log(res)
    list.value = res.data.data
  }
  // 销毁组件
  onUnmounted(() => {
    closeScroll()
  });


  </script>
  
  <style lang="less" scoped>
 .article_title {
        height: 35px;
        background-color: #2984f3;
        display: flex;
        p {

            text-align: center;
            height: 100%;
            line-height: 35px;
            color: #fff;
        }
    }
  .topRec_List {
    height: 100%;
    .maquee {
      width: 100%;
      padding: 0 10px;
      color: #f0ece2;
      height: 20vh;
    }
    ul {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      li {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: left;
        font-size: 16px;
        color: #76dbd1;
        display: flex;
  
        div {
          color: #000;
          text-align: center;
        }
  
        div:nth-child(1) {
          width: 30%;
        }
  
        div:nth-child(2) {
          width: 20%;
        }
  
        div:nth-child(3) {
          width: 10%;
          text-align: right;
        }
        div:nth-child(4) {
          width: 40%;
          text-align: right;
        }
      }
    }
  }
  
  /* 滚动条 */
  ::-webkit-scrollbar {
    z-index: 50;
    width: 3px;
    height: 3px;
    border: none;
    outline: none;
  }
  * {
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    background-color: rgba(206, 14, 14, 0);
  }
  
  ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #1bb4f9;
    transition: all 0.2s;
    height: 20px;
  }
  
  :hover::-webkit-scrollbar-thumb {
    transition: all 0.2s;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to top, #00d9a2, #007af8);
  }
  
  ::-webkit-scrollbar-button {
    display: none;
  }
  
  ::-webkit-scrollbar-corner {
    display: none;
  }

    /**实时报警 */
    .info_warning {
                 height: 400px;
                 margin-bottom: 10px;
                 .timely_alarm {
                     padding: 0 20px;
                     height: calc(100% - 60px);
                     header {
                         height: 80px;
                         display: flex;
                         margin-bottom: 10px;
                         padding: 0 20px;
                         .title {
                             flex: 1;
                             display: flex;
                             align-items: center;
                             justify-content: space-around;
                             border-bottom: 2px solid #2f97c1;
                             display: flex;
                             flex-direction: column;
                             padding-bottom: 15px;
                             background-color: transparent;
                             p {
                                 color: #000;
                                 font-size: 18px;
                             }
                             span {
                                 font-size: 23px;
                                 letter-spacing: 4px;
                                 font-weight: bold;
                                 a {
                                  font-size: 18px;
                                 }
                             }
                             &:nth-child(1) {
                                 position: relative;
                                 &::after {
                                     position: absolute;
                                     content: "";
                                     display:inline-block;
                                     width: 6px;
                                     height: 6px;
                                     border-radius: 50%;
                                     background-color: #2383ad;
                                     bottom: 0;
                                     left: 0;
                                     transform: translateY(3px);
                                     box-shadow: 0 0 3px #000;
                                 
                                 }
                                 &::before {
                                     position: absolute;
                                     content: "";
                                     display:inline-block;
                                     width: 6px;
                                     height: 6px;
                                     border-radius: 50%;
                                     background-color: #2383ad;
                                     bottom: 0;
                                     right: 0;
                                     transform: translateY(3px);
                                     box-shadow: 0 0 3px #000;
                                 }
                             }
                             &:nth-child(3) {
                                 position: relative;
                                 &::after {
                                     position: absolute;
                                     content: "";
                                     display:inline-block;
                                     width: 6px;
                                     height: 6px;
                                     border-radius: 50%;
                                     background-color: #2383ad;
                                     bottom: 0;
                                     left: 0;
                                     transform: translateY(3px);
                                     box-shadow: 0 0 3px #000;
                                 
                                 }
                                 &::before {
                                     position: absolute;
                                     content: "";
                                     display:inline-block;
                                     width: 6px;
                                     height: 6px;
                                     border-radius: 50%;
                                     background-color: #2383ad;
                                     bottom: 0;
                                     right: 0;
                                     transform: translateY(3px);
                                     box-shadow: 0 0 3px #000;
                                 }
                             }
                         }
 
                     }
                     section {
                         height: calc(100% - 90px);
                         margin-top: 20px;
                         overflow: hidden!important;
                     }
                 }
             }
             .device_link {
                 flex: 1;
                 margin-bottom: 10px;
                 .device_content {
                     height: 100%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;
                     height: calc(100% - 60px);
                     section {
                         width: 160px;
                         height: 80px;
                         padding: 10px 0;
                         background: #000;
                         opacity: .6;
                         p {
                             color: #fff;
                             text-align: center;
                             &:first-child {
                                 color: #2971af;
                                 font-size: 20px;
                             }
                             &:last-child {
                                 font-size: 18px;
                                 margin-top: 10px;
                             }
                         }
                     }
                 }
       }
  </style>
  